<template>
    <div ref="chartRef" :style="{ height: height + 'px' }"></div>
</template>

<script>
import { onMounted, ref, defineComponent, watch } from 'vue'
import * as echarts from 'echarts'
export default defineComponent({
    props: {
        nodes: Object,
        height: {
            type: Number,
            default: 0
        }
    },
    setup (props) {
        const chartRef = ref(null)
        let myChart = null
        onMounted(function () {
            if (chartRef.value) {
                const treeData = props.nodes
                const xData = []
                const yData = []
                treeData.forEach(item => {
                    if (item.searchid === '') {
                        return true
                    }
                    xData.push(item.name.substring(0, 2) + '...')
                    yData.push(item.children.length)
                })
                myChart = echarts.init(chartRef.value)
                const option = {
                title: [
                    {
                    text: ''
                    }
                ],
                textStyle: {
                    color: '#fff'
                },
                polar: {
                    radius: [30, '80%']
                },
                radiusAxis: {
                    max: 4
                },
                angleAxis: {
                    type: 'category',
                    data: xData,
                    startAngle: 75,
                    show: false
                },
                tooltip: {},
                series: {
                    type: 'bar',
                    itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#c98cb4' },
                    { offset: 1, color: '#821c83' }
                    ])
                    },
                    data: yData,
                    coordinateSystem: 'polar',
                    label: {
                    show: true,
                    color: '#fff',
                    position: 'middle',
                    formatter: '{b}'
                    }
                },
                animation: false
                }
                myChart.setOption(option)
            }
        })
        watch(() => props.height, (newVal) => {
            if (newVal) {
                setTimeout(() => {
                    if (myChart) {
                        myChart.resize()
                    }
                }, 100)
            }
        })
        return {
            chartRef
        }
    }
})
</script>
